<template>
    <div class="header">
        <!-- 模块名称：头部 -->
        <div class="header-menu">
            <div class="w1190 clearfix">
                <div class="pull-left link" @click="linkToIndex">
                    <!-- 图片的路径 -->
                    <img :src="logoUrl" alt="">
                </div>
                <div class="pull-left" style="margin-left:60px;">
                    <div class="w620 text-center menu">
                        <Row>
                            <i-col span="5">
                                <a  :class="{ red : isIndex }" @click="linkToPage('index')">首 页</a>
                            </i-col>
                            <i-col span="5">
                                <Poptip trigger="hover" placement="bottom" @on-popper-show="onShow('project')" @on-popper-hide="onHide('project')">
                                    <a href="javascript:void(0)" :class="{ red : isProject }">产 品<Icon type="arrow-down-b" :class="{ rotate180 : isPRotate}" class="ivu-f14 ml8"></Icon></a>
                                    <div class="api" slot="content">
                                        <a @click="linkToPage('Product')">产品介绍</a>
                                        <a @click="linkToPage('Sign')">电子签名</a>
                                    </div>
                                </Poptip>
                            </i-col>
                            <i-col span="5">
                                <a @click="linkToPage('Solution')" :class="{ red : isSolution }">解决方案</a>
                            </i-col>
                            <i-col span="5">
                                <Poptip trigger="hover" placement="bottom" @on-popper-show="onShow('support')" @on-popper-hide="onHide('support')">
                                    <a href="javascript:void(0)" :class="{ red : isSupport}">支 持<Icon type="arrow-down-b" :class="{ rotate180 : isSRotate}" class="ivu-f14 ml8"></Icon></a>
                                    <div class="api" slot="content">
                                        <a @click="linkToPage('Online')">在线签约</a>
                                        <a @click="linkToPage('Templet')">合同模版</a>
                                    </div>
                                </Poptip>
                            </i-col>
                            <i-col span="4">
                                <Poptip trigger="hover" placement="bottom" @on-popper-show="onShow('about')" @on-popper-hide="onHide('about')">
                                    <a href="javascript:void(0)" :class="{ red : isAbout }">关于我们<Icon type="arrow-down-b" :class="{ rotate180 : isARotate}" class="ivu-f14 ml8"></Icon></a>
                                    <div class="api" slot="content">
                                        <a @click="linkToPage('Introduce')">公司简介</a>
                                        <a @click="linkToPage('Contact')">联系我们</a>
                                    </div>
                                </Poptip>
                            </i-col>
                        </Row>
                    </div>
                </div>
                <template v-if="!loginsucess">
                  <div class="pull-right">
                    <div class="text-center lrbtn">
                      <input type="button" value="登录" class="loginbtn" @click="loginFn">
                      <input type="button" value="注册" class="registerbtn" @click="registerFn">
                    </div>
                  </div>
                </template>
                <template v-else>
                  <div class="pull-right">
                    <div class="text-center personbtn">
                      <input type="button" value="进入个人中心" @click="linkToUser">
                    </div>
                  </div>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      logoUrl: "img/logo.png",
      isLoginSucc: false,
      isIndex: true,
      isProject: false,
      isSolution: false,
      isSupport: false,
      isAbout: false,
      isPRotate: false,
      isSRotate: false,
      isARotate: false,
    };
  },
  mounted() {
    let name = this.$route.name;
    this.isswitch(name)
  },
  computed: {
    loginsucess () {
      return false
      // return this.$store.state.index.loginsucess
    }
  },
  watch: {
    $route(to, from) {
      let ths = this;
      ths.isswitch(to.name)
      // switch (to.name) {
      //   case 'index':
      //       ths.isIndex=true;
      //       ths.isProject=false;
      //       ths.isSolution=false;
      //       ths.isSupport=false;
      //       ths.isAbout=false;
      //       break;
      //   case 'Product':
      //   case 'Sign':
      //       ths.isIndex=false;
      //       ths.isProject=true;
      //       ths.isSolution=false;
      //       ths.isSupport=false;
      //       ths.isAbout=false;
      //       break;
      //   case 'Solution':
      //       ths.isIndex=false;
      //       ths.isProject=false;
      //       ths.isSolution=true;
      //       ths.isSupport=false;
      //       ths.isAbout=false;
      //       break;
      //   case 'Online':
      //       ths.isIndex=false;
      //       ths.isProject=false;
      //       ths.isSolution=false;
      //       ths.isSupport=true;
      //       ths.isAbout=false;
      //       break;
      //   case 'Introduce':
      //       ths.isIndex=false;
      //       ths.isProject=false;
      //       ths.isSolution=false;
      //       ths.isSupport=false;
      //       ths.isAbout=true;
      //       break;
      //   default:
      //       break;
      // }
    }
  },
  methods: {
    //退出
    signout () {
      const ths = this
      ths.post('/user/accountExit').then(data => {
        if (data.responseCode === '100000') {
          ths.$cookie.delete("id");
          // ths.$cookie.delete("userName");
          ths.$store.state.index.loginsucess = false
          ths.isUser = false;
          ths.$router.push({name:'Home'});
        }
      })
    },
    /**@function loginFn 跳转登录页面 */
    loginFn() {
      let ths = this;
      ths.isIndex = false;
      ths.isProject = false;
      ths.isSolution = false;
      ths.isSupport = false;
      ths.isAbout = false;
      ths.$router.push({ name: "login" });
    },
    /**@function  registerFn 跳转注册页面*/
    registerFn() {
      let ths = this;
      ths.isIndex = false;
      ths.isProject = false;
      ths.isSolution = false;
      ths.isSupport = false;
      ths.isAbout = false;
      ths.$router.push({ name: "register" });
    },
    /**@function linkToPage 跳转页面*/
    linkToPage(name) {
      let ths = this;
      switch (name) {
        // 首页
        case "index":
          ths.$router.push({ name: "index" });
          break;
        // 产品介绍
        case "Product":
          ths.$router.push({ name: "product" });
          break;
        //电子签名
        case "Sign":
          ths.$router.push({ name: "sign" });
          break;
        //解决方案
        case "Solution":
          ths.$router.push({ name: "solution" });
          break;
        //在线签约
        case "Online":
          ths.$router.push({ name: "online" });
          break;
        //合同模板
        case "Templet":
          ths.$router.push({ name: "templet" });
          break;
        //公司简介
        case "Introduce":
          ths.$router.push({ name: "introduce" });
          break;
        //联系我们
        case "Contact":
          ths.$router.push({ name: "contact" });
          break;
        default:
          break;
      }
    },
    /*** @function linkToUser 去用户中心*/
    linkToUser() {
      this.$router.push({ name: "Person" });
      this.$parent.$data.isUser = true;
    },
    linkToIndex() {
      this.$router.push({ name: "index" });
    },
    onShow(name) {
      let ths = this;

      switch (name) {
        case "project":
          ths.isPRotate = true;
          break;
        case "support":
          ths.isSRotate = true;
          break;
        default:
          ths.isARotate = true;
          break;
      }
    },
    onHide(name) {
      let ths = this;

      switch (name) {
        case "project":
          ths.isPRotate = false;
          break;
        case "support":
          ths.isSRotate = false;
          break;
        default:
          ths.isARotate = false;
          break;
      }
    },
    isswitch (data) {
      let ths = this
      switch (data) {
        case 'index':
            ths.isIndex=true;
            ths.isProject=false;
            ths.isSolution=false;
            ths.isSupport=false;
            ths.isAbout=false;
            break;
        case 'Product':
        case 'Sign':
            ths.isIndex=false;
            ths.isProject=true;
            ths.isSolution=false;
            ths.isSupport=false;
            ths.isAbout=false;
            break;
        case 'Solution':
            ths.isIndex=false;
            ths.isProject=false;
            ths.isSolution=true;
            ths.isSupport=false;
            ths.isAbout=false;
            break;
        case 'Online':
            ths.isIndex=false;
            ths.isProject=false;
            ths.isSolution=false;
            ths.isSupport=true;
            ths.isAbout=false;
            break;
        case 'Introduce':
            ths.isIndex=false;
            ths.isProject=false;
            ths.isSolution=false;
            ths.isSupport=false;
            ths.isAbout=true;
            break;
        default:
            break;
      }
    }
  },
  // props: ["isLoginObj"]
};
</script>
